/* eslint-disable react/jsx-filename-extension */
import { CloseCircleOutlined } from '@ant-design/icons';
import { Steps } from 'antd';
import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import ModalC from '../../modal';
import myStyle from './style.less';

const Step = (props = {}) => {
  const {
    className,
    items = [],
    initial,
    direction,
    labelPlacement,
    progressDot,
    responsive,
    size,
    status,
    nowStep,
    onChange = () => {},
    onClose = () => {},
    visible = false,
  } = props;
  const [current, setCurrent] = useState(initial || 0);
  const changeCurrent = (value) => {
    // console.log('onChange:', value);
    setCurrent(value);
    onChange(value);
  };
  useEffect(() => {
    setCurrent(nowStep);
  }, [nowStep]);
  // 关闭
  const clickClose = () => {
    onClose();
  };
  return (
    <ModalC closable={false} maskClosable={false} visible={visible} footer={null} destroyOnClose={true}>
      <div className={myStyle.stepc}>
        {status === 'error' ? (
          <span className={myStyle.closeBtn} onClick={clickClose}>
            <CloseCircleOutlined />
          </span>
        ) : null}
        <Steps
          className={className}
          onChange={changeCurrent}
          direction={direction}
          labelPlacement={labelPlacement}
          progressDot={progressDot}
          responsive={responsive}
          status={status}
          initial={initial}
          size={size}
          current={current}
          items={items}
        />
      </div>
    </ModalC>
  );
};
Step.propTypes = {
  items: PropTypes.array, // 步骤条数据，内容是[{description描述,disabled是否可点击,icon图标,status状态,subTitle子标题,title标题}]
  direction: PropTypes.string, // 指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向
  initial: PropTypes.number, // 起始序号 默认0
  labelPlacement: PropTypes.string, // 指定标签放置位置，默认水平放图标右侧
  progressDot: PropTypes.oneOf([PropTypes.string, PropTypes.func]), // 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 vertical
  // eslint-disable-next-line react/boolean-prop-naming
  responsive: PropTypes.bool, // 当屏幕宽度小于 532px 时自动变为垂直模式
  onChange: PropTypes.func, // 点击切换步骤时触发
  size: PropTypes.string, // 目前支持普通（default）和迷你（small）
  nowStep: PropTypes.number, // 指定当前步骤，从 0 开始记数。
  status: PropTypes.string, // 状态 wait process finish error
  className: PropTypes.string, // 类名
  // eslint-disable-next-line react/boolean-prop-naming
  visible: PropTypes.bool, // 是否可见
  onClose: PropTypes.func, // 关闭触发函数
};
export default Step;
